import { FC } from "react";
import {
  QuestionCheckboxDefaultProps,
  QuestionCheckboxPropsType,
} from "./interface";
import { Checkbox, Space, Typography } from "antd";

const { Paragraph } = Typography;

const Component: FC<QuestionCheckboxPropsType> = (props) => {
  const { title, list, isVertical } = {
    ...QuestionCheckboxDefaultProps,
    ...props,
  };

  return (
    <>
      <Paragraph strong>{title}</Paragraph>
      <Space direction={isVertical ? "vertical" : "horizontal"}>
        {list?.map((option) => (
          <Checkbox
            key={option.value}
            value={option.value}
            checked={option.checked}
          >
            {option.label}
          </Checkbox>
        ))}
      </Space>
    </>
  );
};

export default Component;
